<template>
  <div>
    <!--分类树视图-->
    <div class="head-container">
      <el-input
        v-model="cateName"
        placeholder="请输入类目名称"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
    </div>
    <div class="tree-container">
      <el-tree
        :indent="indent"
        class="tree"
        node-key="id"
        :data="cateOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :default-expanded-keys="idArr"
        ref="tree"
        @node-click="handleNodeClick"
      />
    </div>
  </div>
</template>
<style scoped>
  /* 树形结构节点添加连线 */
  .tree /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
   /deep/ .el-tree{
    background: transparent;
  }

  .tree /deep/ .el-tree-node__children {
    padding-left: 16px;
    overflow: visible;
  }

  .tree /deep/ .el-tree-node :last-child:before {
    height: 20px;
  }

  .tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .tree /deep/ .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .tree /deep/ .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree /deep/ .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .tree /deep/ .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -8px;
    width: 1px;
  }

  .tree /deep/ .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }
</style>
<script>
  import { getCategoryTreeselect } from "@/api/feesys/feeinfo";
export default {
  data() {
    return {
      cateOptions:null,
      cateName:"",
      indent:0,
      idArr:[],
      defaultProps: {
        children: "children",
        label: "label"
      }
    }
  },
  watch: {
    // 根据名称筛选部门树
    cateName(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted(){
    this.getTreeselect();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect(itemId) {
      if(itemId){
        let query={};
        query.id=itemId;
        getCategoryTreeselect(query).then(response => {
          this.cateOptions = response.data;
          console.log(this.cateOptions)
          this.cateOptions.map(m=>{
            if(m.pid=='0'){
              this.idArr.push(m.id);
            }
          })
        });
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data,node) {
      this.$emit('getNodeClick',node);
    }
  }

}
</script>
